window.addEventListener('load',function(){

let search=document.querySelector('.search');
let iptList=document.querySelector('#iptList');
let shut=document.querySelector('#inner .icon');
let focus =document.querySelector('.focus');
let blur =document.querySelector('.blur')
let arrows = focus.querySelector('.focus-arrow');
let arrowL = document.querySelector('.focus .arrow-l');
let arrowR = document.querySelector('.focus .arrow-r');
let recList =document.querySelector('.recommend .rec_list');
let singerList=document.querySelector('.singer .rec_list');
let bangList =document.querySelector('.bang_list')
let singerSub =document.querySelectorAll('.singer .sub_nav a')
let focusIndex=0;
let recomIndex=0;
let singerIndex=0;
let setTime;
let flag=true;
// 头部模块
// 渲染搜索下拉框
fetch("http://39.96.88.57:9090/api/www/search/searchKey?key=&httpsStatus=1&reqId=3d2fd940-d915-11ed-8e03-c7e00f45cb2b").then(res => res.json()).then(res=>{
    for (let i = 0; i < res.data.length; i++) {
           headUl.innerHTML+=`
               <li class="list-item">
                        <a href="#">
                            <span class="id">${i+1}</span>
                            <span class="key_text">${res.data[i]}</span>
                        </a>
                </li>
              `  
    }
    // 获取每个.id 给前三个设置不同的背景
   let ids = document.querySelectorAll('.id');
   ids[0].style.backgroundColor='#ea4343';
   ids[1].style.backgroundColor='#ff6b21';
   ids[2].style.backgroundColor='#ffb700';
  })

    // 搜索框获取焦点和失去焦点事件
    search.addEventListener('focus',function(){
     iptList.style.opacity='1';
     iptList.style.top='35px';
     iptList.style.height='443px';
     console.log(111);
    })
    search.addEventListener('blur',function (){
    iptList.style.opacity='0';
    iptList.style.top='0';
     iptList.style.height='0';

    })

    // 登录/注册点击事件
    dl.addEventListener('click',function(){
        mask.style.display='block';
    })
    zc.addEventListener('click',function(){
        mask.style.display='block';
    })
    shut.addEventListener('click',function(){
        mask.style.display='none';
    })

    // banner 模块
  
    // 轮播图
    fetch('http://39.96.88.57:9090/api/www/banner/index/bannerList?httpsStatus=1').then(r => r.json()).then(r=>{
       r.data.forEach(item => {
       focusImage.innerHTML+=`
         <a href="#">
                <img src="${item.pic}" alt="">
         </a>
       `
       });
    
    //  获取全部的图片
    let focusImgs=document.querySelectorAll('.focus #focusImage img')
    let imgClone=focusImage.children[0].cloneNode(true);
    focusImage.append(imgClone);
    arrowR.addEventListener('click',function(){
        arrowRight();
    })

    arrowL.addEventListener('click',function(){
        arrowLeft();

    })
    // 自动轮播
    setIntFun();
    // 鼠标移入清除定时器
    focus.addEventListener('mouseenter',function(){
        clearInterval(setTime);
        arrows.style.display='block';
    })
    // 鼠标移出开启定时器
    focus.addEventListener('mouseleave',function(){
       setIntFun();
       arrows.style.display='none';
    })

    // 动态生成小圆点
    for (let i = 0; i < focusImgs.length; i++) {
        let lis =document.createElement('li');
        circle.appendChild(lis); 
    }
    circle.children[0].className='current';

    let circleLis=document.querySelectorAll('#circle li')
    // 鼠标移入小圆点切换图片
    for (let i = 0; i < circleLis.length; i++) {
      circleLis[i].addEventListener('click',function(){
        circleLis[focusIndex].className='';
        focusIndex=i;
        focusImage.style.marginLeft= focusIndex * -1288 +'px';
        circleLis[focusIndex].className='current';
        focusImage.style.transition='all 0.5s'
          blur.style.background = `url(${focusImgs[focusIndex].src})`
        blur.style.backgroundPosition = ` -98px -280px`;
      })
        
    }
      // 封装向右滑动函数
    function arrowRight(){
      if(flag){
        flag=false;
        circleLis[focusIndex].className='';
        focusIndex++;
        focusImage.style.transition='all 0.5s'
        focusImage.style.marginLeft= focusIndex * -1288 +'px';
        if(focusIndex==focusImgs.length){
               focusIndex=0;
            setTimeout(() => {
            focusImage.style.marginLeft='0px';
            focusImage.style.transition='none'
         
            }, 500); 
        }
        circleLis[focusIndex].className='current';
        setTimeout(() => {
            flag=true;
        },500);
      }
        blur.style.background = `url(${focusImgs[focusIndex].src})`
        blur.style.backgroundPosition = ` -98px -280px`;

    }
      // 封装向左滑动函数
    function arrowLeft(){
      if(flag){
        flag=false;
          circleLis[focusIndex].className='';
        if(focusIndex<=0){
            focusIndex=focusImgs.length;
            focusImage.style.marginLeft= focusIndex * -1288 +'px';
            focusImage.style.transition='none'
        }
        focusIndex--;
       setTimeout(()=>{
            focusImage.style.marginLeft= focusIndex * -1288 +'px';
            focusImage.style.transition='all 0.5s'
       })
        circleLis[focusIndex].className='current';
        setTimeout(()=>{
            flag=true;
        },500)
      }
        blur.style.background = `url(${focusImgs[focusIndex].src})`
        blur.style.backgroundPosition = ` -98px -280px`;
    }
    
    // 封装定时器
    function setIntFun(){
          setTime= setInterval(()=>{
                arrowRight();
            },2000)
 }
    })

// 排行榜
let recommends =document.querySelectorAll('.recommend .sub_nav a');
// 进入页面每日推荐先渲染一次
mrtj();

// tab样式切换
for (let i = 0; i < recommends.length; i++) {
    recommends[i].addEventListener('click',function(){
        recommends[recomIndex].className='';
        recomIndex=i;
        recommends[recomIndex].className='active'
    }) 
}
// 第一个按钮点击渲染页面
recommends[0].addEventListener('click',function(){
    recList.innerHTML=''
    mrtj();
})

// 翻唱
for (let i = 1; i < recommends.length; i++) {
let arr =[1848,621,146,35]
 recommends[i].addEventListener('click',function(){
fetch(`http://39.96.88.57:9090/api/www/classify/playlist/getTagPlayList?id=${arr[i-1]}&pn=1&rn=5&httpsStatus=1`).then(r => r.json()).then(r=>{
    recList.innerHTML=''
    r.data.data.forEach(item=>{
    recList.innerHTML+=
        `
        <div class="item">
              <div class="cover">
                  <a href="./songListDetails.html?id=${item.id}" class="coverA">
                      <img src="${item.img}" alt="">
                      <div class="mask">
                          <div class="play">
                          </div>
                      </div>
                  </a>
                       <p class="name">
                      <a href="./songListDetails.html?id=${item.id}">
                      <span title="${item.name}">${item.name}</span>
                      </a>
                    </p>
                  <p class="count">
                      ${item.listencnt==0?'':'<i></i>'} ${item.listencnt >10000?(item.listencnt/10000).toFixed(1)+'万':item.listencnt==0?'':item.listencnt}</p>
              </div>
        </div>
        `
    })
})
})
}

// 推荐歌单-每日推荐函数封装
function mrtj(){
     fetch('http://39.96.88.57:9090/api/www/rcm/index/playlist?id=rcm&pn=1&rn=5&httpsStatus=1').then(r => r.json()).then(r=>{
     
     r.data.list.forEach(item=>{
    recList.innerHTML+=
        `
        <div class="item">
              <div class="cover">
                  <a href="./songListDetails.html?id=${item.id}" class="coverA">
                      <img src="${item.img}" alt="">
                      <div class="mask">
                          <div class="play">
                          </div>
                      </div>
                  </a>
                   <p class="name">
                      <a href="./songListDetails.html?id=${item.id}">
                      <span title="${item.name}">${item.name}</span>
                      </a>
                    </p>
                  <p class="count">
                      <i></i>${item.listencnt >10000?(item.listencnt/10000).toFixed(1)+'万':item.listencnt}</p>
              </div>
        </div>
        `
    })
})
}


// 排行榜模块
let index=1;
 fetch('http://39.96.88.57:9090/api/www/bang/index/bangList?httpsStatus=1').then(r => r.json()).then(r=>{
     r.data.forEach(item => {
        bangList.innerHTML+=
                    `
            <div class="bang">
                    <div class="bang_top">
                        <div class="top_bg">
                              <div class="play">
                              </div>
                            <img src="./images/item${index++}.png" alt="">
                        </div>
                        <img class="bang_bg" src="${item.pic}" alt="">
                    </div>
                    <ul class="list_con listUl">
                    </ul>
                    </div>
                `
           for (let j = 0; j < item.musicList.length; j++) {
            let lis =document.createElement('li');
            if(j<5){
                   lis.innerHTML+= `
            <div class="top_img">
                     ${j<3?`<img src="./images/top${j+1}.png" alt=""></img>`:`<span>${j+1}</span>`}
            </div>
                    <div class="bang_txt">
                        <a href="./lyrics.html?id=${item.musicList[j].rid}"><p title="${item.musicList[j].album}" class="song_name">${item.musicList[j].album}</p></a>
                        <a href="./singerDetails.html?id=${item.musicList[j].artistid}"><p title="${item.musicList[j].artist}" class="artist">${item.musicList[j].artist}</p></a>
                    </div>
        `   
                let listCon =document.querySelectorAll('.listUl');
                for (let k = 0; k < listCon.length; k++) {
                listCon[k].appendChild(lis);
                       
            
 } }}})})



// 歌手推荐模块

// tab样式切换
let singerArr=[11,13,12,16];
singer()
for (let i = 0; i < singerSub.length; i++) {
    singerSub[i].addEventListener('click',function(){
        singerList.innerHTML=''
        singerSub[singerIndex].className='';
        singerIndex=i;
        singerSub[singerIndex].className='active'

singer();

    }) 
}

// 歌手推荐封装函数
function singer(){
 fetch(`http://39.96.88.57:9090/api/www/artist/artistInfo?category=${singerArr[singerIndex]}&pn=1&rn=6&httpsStatus=1`).then(res => res.json()).then(res=>{
 res.data.artistList.forEach(item => {
    singerList.innerHTML+=
    `
       <a href="./singerDetails.html?id=${item.id}" class="artist_item">
                    <div class="pic_out">
                        <img src="${item.pic}" alt="">
                    </div>
                    <p class="name">
                        <span title="${item.name}">${item.name}</span>
                    </p>
                    <p class="count">
                        ${item.musicNum}首歌曲
                    </p>
       </a>
    `
        
   });
   }) 
}


// 下载弹窗
let downAs = document.querySelectorAll('.down-a');
downAs[0].addEventListener('click',function(){
     $('.s1').show().siblings().hide();
     $('.Model').toggle();
    $('.btnss a').text('下载安装包');
    $('.btnss a').attr('href','http://down.shouji.kuwo.cn/star/mobile/kwplayer_ar_newpcguanwangmobile.apk');


})
downAs[1].addEventListener('click',function(){
    $('.s1').hide().siblings().show();
    $('.Model').toggle();
    $('.btnss a').text('去Appstore下载');
    $('.btnss a').attr('href','https://apps.apple.com/cn/app/ku-wo-yin-lepro/id588673713?l=en');
})

$('.icon-Down').click(function(){
    $('.Model').hide();
})

let platforms = document.querySelector('.platforms')
let iphone =document.querySelector('.iphone')
let android =document.querySelector('.android')
window.onscroll = function () {
            let st = document.documentElement.scrollTop || document.body.scrollTop;
            let sh = document.documentElement.scrollHeight;
            if (st > sh - window.innerHeight - 600) {
                platforms.style.opacity = '1';
            } else {
                platforms.style.opacity = '0';
            }
        }
      
  $(".ii ").click(function() {
                $("body,html").stop().animate({
                    scrollTop: 0
                })
            })
// 下载弹窗

android.addEventListener('click',function(){
     $('.s1').show().siblings().hide();
     $('.Model').toggle();
    $('.btnss a').text('下载安装包');
    $('.btnss a').attr('href','http://down.shouji.kuwo.cn/star/mobile/kwplayer_ar_newpcguanwangmobile.apk');


})
iphone.addEventListener('click',function(){
    $('.s1').hide().siblings().show();
    $('.Model').toggle();
    $('.btnss a').text('去Appstore下载');
    $('.btnss a').attr('href','https://apps.apple.com/cn/app/ku-wo-yin-lepro/id588673713?l=en');
})

$('.icon-Down').click(function(){
    $('.Model').hide();
})
$('.fk').click(function(){
$('.text_out').toggle();
})
$('.textI').click(function(){
    $('.text_out').hide();
})
})